<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\date\DatePicker;
use app\models\ClassroomModel;
use app\models\ClassroomuseModel;
use yii\web\View;

/* @var $this yii\web\View */
/* @var $model app\models\ClassroomuseModel */
/* @var $form yii\widgets\ActiveForm */
$this->title = '选择';
$this->params['breadcrumbs'][] = ['label' => '教室使用', 'url' => ['classroomindex']];
$this->params['breadcrumbs'][] = $this->title;

$model=new ClassroomuseModel();
$classrooms=new ClassroomModel();
$classrooms=$classrooms->getAllClassrooms();
$url=\Yii::getAlias('@web');
$js=<<< Js
// 监听-查询按钮点击事件
function myBtnSearch(){	
	//获取-教室值		
	var roomSelect=$("#classroomusemodel-classroom option:selected");
	var myRoom=roomSelect.val()		
	//获取-日期值
	var dateSelect=$("#classroomusemodel-time");
	var myDate=dateSelect.val()
	//设置申请按钮的链接地址--a.href
	for(var i=8;i<24;i++){                    	
                    aLink=document.getElementById('a'+i);                    	
                    aLink.href="/bnews/web/apply/classroomcreate?myRoom="+myRoom+"&myDate="+myDate+"&myMoment="+i;
                    }
	
	//发送请求-查询该教室与日期-可用时间段
	$.ajax({
                    url: '$url/apply/choosemoment?myRoom='+myRoom+'&myDate='+myDate,
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                    	for(j = 0,len=data.length; j < len; j++) { 
                    		//该时间段已被申请的情况，显示“已占用”
                    		if(data[j].approved=="同意"){
	                    		td1=document.getElementById("input"+data[j].moment);
	                    		td1.style.color='red';
	     						td1.innerText='已占用';
                    		}
                    		else if(data[j].approved=="不同意"){
                    			
                    		}
                    		//该时间段已被申请，但还未经过审批，显示“审批中”
                    		else{
                    			td1=document.getElementById("input"+data[j].moment);
                    			td1.style.color='red';
     							td1.innerText=data[j].approved;
                    		}
                    		
						}

                    }
                });
	
// 	显示时间段面板	
	var ifShow = document.getElementById('ifShow');
	ifShow.style.display="";
   
}
Js;
$js2=<<<  Js
//教室，日期选择框内容改变时，隐藏页面并重新添加<a>标签
function reChoose(){
		var ifShow = document.getElementById('ifShow');
 		ifShow.style.display="none";
 	
		for(k=8;k<24;k++){   	
			var a=document.createElement("a");
			var node = document.createTextNode("申请");
    		a.appendChild(node);
			a.setAttribute("href","#");
			a.setAttribute("class","btn btn-info");
			a.setAttribute("id","a"+k);
			a.setAttribute("style","background:#55ea55");		
            td=document.getElementById("input"+k); 
			td.innerText='';
			td.appendChild(a);
         }
		
		
}
Js;
$this->registerJs($js2, View::POS_END, 'reChoose');
$this->registerJs($js, View::POS_END, 'myAjax');
?>


<div class="classroomuse-model-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'classroom')->dropDownList($classrooms,['onchange'=>'reChoose()']) ?>
    
    <?= $form->field($model, 'time')->widget(DatePicker::classname(), [
    	
        'options' => ['placeholder' => 'Enter birth date ...','onchange'=>'reChoose()'],
        'pluginOptions' => [
            'autoclose'=>true,
            'format' => 'yyyy.mm.dd'
        ]
    ])->label('使用时间');
    ?>
	
    <?php ActiveForm::end(); ?>
    <p>
    	 <div onclick="myBtnSearch()" style="float: left;margin-right: 4px;" ><a class="btn btn-info"  data-type="xls" href="javascript:;">查询</a></div>
    </p>

</div>



<div id="ifShow" class="row" style="display: none;">
	<!-- Start Panel -->
	<div class="col-md-12">
		<div class="panel panel-default">
			<hr>
			<div class="panel-title">选择时间段：</div>
			<div class="panel-body table-responsive">
				<div id="example0_wrapper" class="dataTables_wrapper">
					<table id="example0" class="table display dataTable" role="grid"
						aria-describedby="example0_info">
						<thead>
							<tr role="row">
								<th class="sorting_asc" tabindex="0" aria-controls="example0"
									rowspan="1" colspan="1" aria-sort="ascending"
									aria-label="Name: activate to sort column descending"
									style="width: 140px;">时间段</th>
								<th class="sorting" tabindex="0" aria-controls="example0"
									rowspan="1" colspan="1"
									aria-label="Position: activate to sort column ascending"
									style="width: 226px;">状态</th>
							</tr>
						</thead>
						<tbody>
							<tr role="row" class="odd" >
								<td class="sorting_1" >8点</td>
								<td id="input8"><a id="a8" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">9点</td>
								<td id="input9"><a id="a9" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="odd">
								<td class="sorting_1">10点</td>
								<td id="input10"><a id="a10" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">11点</td>
								<td id="input11"><a id="a11" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="odd">
								<td class="sorting_1">12点</td>
								<td id="input12"><a id="a12" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">13点</td>
								<td id="input13"><a id="a13" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="odd">
								<td class="sorting_1">14点</td>
								<td id="input14"><a id="a14" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">15点</td>
								<td id="input15"><a id="a15" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="odd">
								<td class="sorting_1">16点</td>
								<td id="input16"><a id="a16" class="btn btn-info" style="background:#55ea55">申请</a></td>

							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">17点</td>
								<td id="input17"><a id="a17" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">18点</td>
								<td id="input18"><a id="a18" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">19点</td>
								<td id="input19"><a id="a19" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">20点</td>
								<td id="input20"><a id="a20" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">21点</td>
								<td id="input21"><a id="a21" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">22点</td>
								<td id="input22"><a id="a22" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
							<tr role="row" class="even">
								<td class="sorting_1">23点</td>
								<td id="input23"><a id="a23" class="btn btn-info" style="background:#55ea55">申请</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- End Panel -->
</div>